<template>
    <div class="movie-detail-page">
        <div >
            <div class="head-box" :style="{backgroundColor:bgColor}">
                <div class="back-btn" @click="$router.back(-1)">
                    <img src="../../static/img/back_detail.png" alt="">
                </div>
                <div class="movie-info-box" v-if="movieInfo">
                    <div class="movie-title">{{translateString(movieInfo.title)}}</div>
                    <div class="movie-other" v-if="movieInfo.genreTypes">{{getGenreTypeText(movieInfo.genreTypes)}}</div>
                    <div class="movie-other" >
                        <span v-if="movieInfo.countryId">{{movieInfo.countryId}} |</span>
                        <span v-if="movieInfo.durationHour || movieInfo.durationMinute">{{getDurationtime(movieInfo.durationHour, movieInfo.durationMinute)}}</span>
                    </div>
                </div>
                <div class="movie-cover-box">
                    <img v-lazy="cover" :key="cover" alt="" :onload="getImageMainColor(cover)" />
                </div>
            </div>
            <div class="other-box"><!--此处不可用v-if 避免下方ref取不到-->
                <div v-show="synopsis" class="padding-b">
                    <div class="item-title">{{$t('m.Synopsis')}}</div>
                    <p class="item-info description" :class="fold ? 'fold' : 'unfold'" ref="synopsis"
                       v-html="translateString(synopsis)"></p>
                    <div class="more-description" v-show="fold" @click="fold = !fold">More</div>
                </div>
                <div v-if="movieInfo.director" class="padding-b">
                    <div class="item-title">{{$t('m.Directors')}}</div>
                    <p class="item-info">{{translateString(movieInfo.director)}}</p>
                </div>
                <div v-if="movieInfo.cast" class="padding-b">
                    <div class="item-title">{{$t('m.Casts')}}</div>
                    <p class="item-info">{{translateString(movieInfo.cast)}}</p>
                </div>
                <div v-if="photos" class="padding-b">
                    <div class="item-title">
                        <div class="title-text">{{$t('m.Photos')}}</div>
                        <div class="title-text right" @click="PhotosShow = true">{{$t('m.SeeAll')}}</div>
                    </div>
                    <div class="img-out-box">
                        <div class="img-box" v-for="(item, index) in photos" :key="'photo_' + index">
                            <img v-lazy="item.url" :key="item.movieId" alt=""/>
                        </div>

                    </div>
                </div>
                <div v-if="trailers" class="padding-b">
                    <div class="item-title">
                        <div class="title-text">{{$t('m.Trailers')}}</div>
                    </div>
                    <div class="img-out-box">
                        <div class="img-box videos" v-for="(item, index) in trailers" @click="goToVideo(item)" :key="'photo_' + index">
                            <img v-lazy="item.photo" :key="item.id" alt=""/>
                            <div class="video-icon"><div></div></div>
                        </div>

                    </div>
                </div>

            </div>
            <!--photos popup-->
            <van-popup class="modal" v-model="PhotosShow" position="right" :overlay="false">
                <van-nav-bar
                    :title="translateString(movieInfo.title)"
                    class="filter-title"
                    left-arrow
                    @click-left="PhotosShow = false"
                />
                <div class="dy-flexbox">
                    <div class="photos-list-box" v-for="(item, index) in photos" :key="'photo_list_' + index">
                        <div class="photos-list" :style="{backgroundImage: 'url('+ item.url +')'}" @click="showImage(index)"></div>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>
<script>
    import {movieDetail,} from '../../static/api/mgc_api'
    import genre from '../../static/json/genre'
    import mm_genre from '../../static/mmJson/genre'

    import {ImagePreview} from 'vant';
    export default {
        data() {
            return {
                id: '',
                bgColor: '#caced1',
                cover: '',
                loading: false,
                movieInfo:{},
                synopsis: '',
                photos: [],
                trailers: [],
                fold: false,
                PhotosShow: false,
                PhotosPopShow: false,
                instance: {},
            }
        },
        computed: {
            genreJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_genre
                } else {
                    return genre
                }
            },
        },
        methods: {
            showImage(index) {
                this.PhotosPopShow = true
                let arr = this.photos
                let imageArr = []
                let that = this
                if (arr.length > 0) {
                    for (let i=0; i<arr.length; i++) {
                        let i_url = arr[i].url
                        imageArr.push(i_url)
                    }
                    let options = {
                        images: imageArr,
                        startPosition: index,
                        onClose() {
                            that.PhotosPopShow = false
                        },
                        loop: false,
                    }
                    this.instance = ImagePreview(options);
                }
            },
            translateString(str) {
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
            },
            getDurationtime(hours, mins){
                let str = ''
                if (hours) {
                    if (mins) {
                        str = hours * 60 + mins + ' min'
                    } else {
                        str = hours * 60+ ' min'
                    }
                } else {
                    if (mins) {
                        str = hours * 60 + mins + ' min'
                    }
                }
                return str
            },
            getGenreTypeText(geners){
                let str = ''
                for(let i=0; i<geners.length; i++){
                    if (i == 0) {
                        str= this.getGenreTypesItem(geners[i])
                    } else {
                        str= str + ' | ' + this.getGenreTypesItem(geners[i])
                    }
                }
                return str
            },
            getGenreTypesItem (it) {
                let str = ''
                this.genreJson.forEach((item) => {
                    if (item.value == it) {
                        str = item.text || ''
                    }
                })
                return str
            },
            getImageMainColor(url){
                if(!url || url == '') return false
                let xhr = new XMLHttpRequest();
                let that = this
                xhr.onload = function () {
                    let _url = URL.createObjectURL(this.response);
                    let img = new Image();
                    img.onload = function () {
                        let result = that.$analyze(_url, { paletteSize: 30, ignore: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ], scale: 0.6 })
                        result.then((result) => {
                            that.bgColor = result[0].color
                        })
                        // 图片用完后记得释放内存
                        URL.revokeObjectURL(_url);
                    };
                    img.src = _url;
                };
                xhr.open('GET', url, true);
                xhr.responseType = 'blob';
                xhr.send();
            },
            initInfo (id) {
                this.loading = true
                movieDetail(id).then((res) => {
                    if (res.data.data) {
                        if (res.data.data.errorID === 0) {
                            let obj = res.data.data.object
                            this.movieInfo =  obj.info
                            if (obj.info.synopsis) {
                                this.synopsis = obj.info.synopsis.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(new RegExp("\n", "gm"), '<br/>')
                                setTimeout(() => {
                                    if (this.$refs.synopsis) {
                                        // console.log(this.$refs.description.offsetHeight)
                                        if (this.$refs.synopsis.offsetHeight >= 110) {
                                            // description每行高度22,高度少于四行时不显示More
                                            this.fold = true
                                        }
                                    }
                                }, 200)
                            }
                            this.photos = obj.photos
                            this.trailers = obj.info.trailers
                            this.cover = obj.info.coverPhoto
                            this.loading = false
                        } else {
                            this.$toast(res.data.data.message)
                            this.loading = false
                        }
                    }
                })
                    .catch((error) => {
                        console.log(error)
                        this.$toast('error,please try again leter')
                        this.loading = false
                    })
            },
            goToVideo(item){
                window.open(item.url, "_blank");
                // this.$router.push({
                //     path:'/movie/movie-video',
                //     query:{
                //         id: item.id,
                //         photo: item.photo,
                //         url: item.url,
                //     }
                // })
            }
        },
        mounted(){
            if(this.$route.query.id) {
                this.id = this.$route.query.id || ''
                this.initInfo(this.id)
            }
        },
        beforeRouteLeave (to, from, next) {
            let leave = true;
            if (this.PhotosPopShow && this.PhotosShow) {
                this.PhotosPopShow = false
                this.instance.close();
                leave = false
            } else if (!this.PhotosPopShow && this.PhotosShow) {
                this.PhotosShow = false
                leave = false
            } else if (this.PhotosPopShow && !this.PhotosShow) {
                this.PhotosPopShow = false
                this.instance.close();
                leave = false
            }

            if (leave) {
                next()
            } else {
                next(false)
            }
        },
    };
</script>
<style>
    .movie-detail-page .modal .van-field__body{
        height: 100%;
    }
</style>
<style scoped>
    .head-box{
        height: 190px;
        background-color: #caced1;
        transition: background-color .6s;
        transform: translateZ(0);
        position: relative;
    }
    .movie-cover-box{
        position: absolute;
        bottom: 0;
        right: 20px;
        width: 100px;
        height: 130px;
        background-color: #fff;
        /*box-shadow:0px -2px 4px #cacef1;*/
    }
    .movie-cover-box img{
        width: 100%;
        height: 100%;
    }
    .back-btn{
        position: absolute;
        top:10px;
        left:12px;
        width:32px;
        height: 32px;
        background: rgba(255,255,255,.2);
        z-index:99;
        padding:7px;
        border-radius: 16px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .back-btn img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .movie-info-box{
        padding: 50px 4% 10px;
        color: #fff;
    }
    .movie-title{
        font-size: 16px;
    }
    .item-title {
        /*color: rgb(161, 161, 161);*/
        display: flex;
    }
    .item-title .title-text{
        flex: 1;
    }
    .item-title .title-text.right{
        text-align: right;
        color: rgb(14, 108, 156);
    }
    .item-info {
        margin: 0;
        word-wrap: break-word;
        color: #666;
    }
    .description {
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        overflow: hidden;
        line-height: 22px;
    }
    .description.fold {
        -webkit-line-clamp: 5;
    }
    .description.unfold {
        -webkit-line-clamp: 100;
    }
    .more-description {
        color: rgb(14, 108, 156);
        margin-top: 3px;
        text-align: right;
    }
    .other-box{
        padding: 10px 4%;
    }
    .padding-b{
        padding-bottom: 10px;
        border-bottom: 1px solid #e3f2fd;
        margin-bottom: 8px;
    }
    .img-out-box{
        display: flex;
        /*width: 100%;*/
        overflow-x: scroll;
    }
    .img-box{
        /*flex: 1;*/
        height: 80px;
        margin-right: 5px;
        position: relative;
    }
    .img-box img{
        width: 80px;
        height: 80px;
        display: block;
    }
    .img-box.videos img{
        width: 140px;
        height: 80px;
        display: block;
    }
    .video-icon{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -15px;
        padding: 5px 0 5px 9px;
        border: 2px solid #ffffff;
        border-radius: 15px;
        box-sizing: border-box;
    }
    .video-icon div{
        content: "";
        height: 15px;
        border-style: solid;
        border-width: 8px 0 8px 12px;
        border-color: transparent transparent transparent #fff;
    }
    .modal {
        width: 100%;
        height: 100%;
    }
    .dy-flexbox{
        display: flex;
        flex-wrap: wrap;
    }
    .photos-list-box{
        margin-left: 0.6%;
        margin-bottom: 0.8%;
        width: 32.5%;
    }
    .photos-list{
        display: flex;
        background: #f0f0f0;
        position: relative;
        z-index: 0;
        height: 0;
        padding: 0 0 100%;
        overflow: hidden;
        background-position: 50%;
        background-size: cover;
        opacity: 1;
        transition: opacity 0.5s ease-in 0s;
    }
</style>
